<template>
  <div class="page_container">
    <PageTitle />

    <ScrollContainer>
      <Form
        :data="opts"
        :rows="5"
        :cols="2"
        label-width="100px"
        readonly
      />

      <template #btns>
        <el-button
          v-if="isBtnPermission('PermissionEdit')"
          @click="$router.push({
            name:'PermissionEdit',
            params: {
              from: {
                name: 'PermissionDetail'
              }
            }
          })"
          type="primary"
          round
        >
          修改
        </el-button>
        <el-button @click="back" round>
          返回
        </el-button>
      </template>
    </ScrollContainer>
  </div>
</template>

<script>
import {
  getPermissionDetail,
} from '@/api/home/system/permission.js';
import { changeForm } from '@u/form.js';

export default {
  name: 'PermissionDetail',
  data() {
    return {
      id: this.$route.params.id,
      opts: {
        title: {
          label: '权限名称：',
          value: '',
          position: [1, 1]
        },
        type: {
          label: '权限类别：',
          belong: 'type.name',
          value: '',
          position: [2, 1]
        },
        stateId: {
          label: '状态：',
          belong: 'state.name',
          value: '',
          position: [3, 1]
        },
        isShow: {
          value: '',
          label: '菜单栏显示：',
          position: [4, 1]
        },
        remark: {
          label: '备注：',
          value: '',
          position: [5, 1],
          attrs: {
            type: 'textarea'
          }
        },
        name: {
          label: '标识：',
          value: '',
          position: [1, 2]
        },
        parent: {
          label: '上级权限：',
          value: '',
          position: [2, 2]
        },
        sort: {
          label: '排序：',
          value: '',
          position: [3, 2]
        },
        redirect: {
          label: '路径：',
          value: '',
          position: [4, 2]
        },
        icon: {
          label: '图标：',
          value: '',
          position: [5, 2]
        }
      }
    };
  },
  created() {
    getPermissionDetail(this.id).then(res => {
      if (res.code == 200) {
        res.data.parent = res.data.parent.title || '无上级';
        res.data.isShow = res.data.isShow ? '是' : '否';
        changeForm(this.opts, res.data, true);
      }
    });
  },
  methods: {
    back() {
      this.navigateBack({
        to: {
          name: 'Permission',
        },
        from: this.$route.params.from,
        params: {
          removeTagViews: ['PermissionDetail']
        }
      });
    }
  },
  components: {
    Form: () => import('@c/Form.vue')
  }
};
</script>

<style lang="scss" scoped>

</style>
